<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i>用户
                </el-breadcrumb-item>
                <el-breadcrumb-item>用户注册</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form :rules="userRegisterRule" ref="userRegForm" :model="userRegForm" label-width="80px">
                    <el-form-item label="用户名" prop="username" width="500px">
                        <el-input v-model="userRegForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="userRegForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="userRegForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="userRegForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="密码问题">
                        <el-input v-model="userRegForm.question"></el-input>
                    </el-form-item>
                    <el-form-item label="密码答案">
                        <el-input v-model="userRegForm.answer"></el-input>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="registerForm('userRegForm')">注册</el-button>
                        <el-button @click="resetForm('userRegForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>

    import { fetchUserRegisterData,fetchUsernameDuplicatedData } from '../../api/index';
    export default {
        name: 'BaseForm',
        data() {
            // 此处自定义校验：用户名不允许重复的js逻辑
            var validateUsernameDuplicated = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('用户名不能为空!'))
                }
                setTimeout(() => {
                    console.log("before submit:-----username:" + value);
                    // 使用axios调用后台校验用户名重复的接口
                    fetchUsernameDuplicatedData(value).then(res => {
                        var code = res.data.code;
                        if(code == -1) {
//                            this.$message.error("用户名重复！");
                            callback(new Error('用户名重复'))
                        } else if(code == 200) {
                            // this.$message.success("用户名可以使用！");
                            callback()
                        }
                    });
                }, 1000)
            }
            return {
                userRegForm: {
                    username: '',
                    password: '',
                    phone: null,
                    email: '',
                    question: null,
                    answer: null
                },
                userRegisterRule:{
                    username: [
                        {required: true, /*message: '请输入用户名',*/ trigger: 'blur',validator: validateUsernameDuplicated},
                        {min: 2, max: 50, message: '用户名长度在 2 到 50 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 2, max: 50, message: '密码长度在 2 到 50 个字符', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            registerForm(formName) {
                console.log("----------register user:");

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log('validate ok , ready to submit!');
                        // ajax请求用户注册接口。
                        fetchUserRegisterData(this.userRegForm).then(res => {
                            /* console.log("res.data:"+res.data)*/
                            var myResp = res.data;
                            console.log(myResp)
                            if (myResp.code == 200) {
                                this.$message.success('恭喜，用户注册成功！');
                                this.resetForm(formName);//清空注册表单内容
                            } else {
                                this.$message.error(myResp.msg)
                            }
                        });

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    };
</script>


<style>
    /*.form-box {
        width: 1200px;
    }
    .el-form {
        width: 85%;
    }

    .el-form-item {
        width: 350px;
    }
    .el-form-item__error {
        color: red;
        display: inline;
        height: 12px;
    }*/
</style>